<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>08_监视属性练习</title>
    </head>
    <body>
        <div id="app">
            <p>{{num}}</p>
            <button @click="num++">按钮</button>
            <p>{{person}}</p>
            <button @click="add">添加</button>
        </div>
        <script src="./js/vue.js"></script>
        <script>
            const vm = new Vue({
                //数据:非函数数据
                data:{
                    num:0,
                    persons:[
                        {id:1,name:'华哥',age:38},
                        {id:2,name:'红浪漫',age:18},
                    ],
                },
                //方法:函数数据
                method:{
                    add(){
                        this.persons[0].age++;
                    },
                },
                //监视:监视数据的变化,一旦发生变化,就会触发指定函数
                watch:{
                    //监视num数据的变化 一旦发生变化 就会触发指定函数
                    //监视属性有两种写法:
                    // 惰性监视:第一次不触发
                    num(newVal,oldVal){
                        console.log(newVal,oldVal);
                    },
                    num:{
                        handler(newVal,oldVal){
                            console.log(newVal,oldVal);
                        },
                    },

                    //立即监视: 第一次触发
                    num:{
                        handler(newVal,oldVal){
                            console.log(newVal,oldVal);
                        },
                        immediate:true,
                    },

                    //普通监视:只能监视数据第一层属性的变化 内部数据变化检测不到
                    //深度监视:深度监视可以
                    persons:{
                        handler(newVal,oldVal){
                            //监视数据如果是基本数据类型 newVal和oldVal是有差异的
                            //监视数据如果是引用数据类型 newVal和oldVal是没有差异的
                            console.log(newVal,oldval);
                        },
                        deep:true,
                    },
                }
            });
            vm.$mount('#app');
        </script>
    </body>
</html>